/**
 * 观察者, 对应的是网页的节点中的的指令属性
 * 例如：v-text:xxx、 {{xxx}}
 */
class Watcher { 
  /**
   * @param {*} vm vue实例
   * @param {*} key 观察的具体属性
   * @param {*} cb 属性值发生变化后的对应的回调函数(更新DOM的方法)
   */
  constructor(vm, key, cb) { 
    this.vm = vm
    // data中的属性名称
    this.key = key
    // 回调函数负责更新视图
    this.cb = cb

    // 把watcher对象记录到Dep类的静态属性target, 在创建Watcher实例的时候
    Dep.target = this
    // 记录历史值, vm[key] 触发监察属性的getter方法,把观察者， 添加到发布者的数组中
    this.oldValue = vm[key]
    Dep.target = null // 清除， 防止重复添加
  }
  /**
   * 当数据发生变化的时候更新视图
   */
  update() { 
    let newValue = this.vm[this.key]
    if (this.oldValue === newValue) return
    this.cb(newValue) // 更新视图
  }
}